<template>
  <div id="readyList">
    <van-tabs sticky animated swipeable v-model="active">
      <van-tab v-for="(tab,index) in tabs" :key="`${index}tab页`" :title="tab.name">
        <div class="tab-panel bg-grey">
          <van-pull-refresh v-model="isLoading" @refresh="showList(tab.data, tab.page, tab.type, tab.finished, true, false)">
            <img
              slot="loading"
              class="loading-gif-refresh"
              src="../../assets/loading.gif"
            >
            <form >
              <div class="search-area-title">
                <van-row type="flex" justify="space-between">
                  <van-col span="21">
                    <van-search
                      :show-action="showCancel"
                      v-model="searchValue"
                      placeholder="请输入搜索标题"
                      @search="onSearch"
                      @cancel="onCancel"
                    />
                  </van-col>
                  <van-col span="3" class="align-center">
                    <img @click="filtratePopup = true" class="search-img" :src="showFiltrateData.length > 0?require('../../assets/documents/shaixuan_active.png'):require('../../assets/documents/shaixuan.png')">
                  </van-col>
                </van-row>
              </div>
              <div v-if="showFiltrateData.length > 0" class="filtershow ">
                <p class="van-ellipsis">
                  <span>筛选：</span>
                  <span class="filter-span" v-for="(item, index) in showFiltrateData" :key="index">
                    {{item.title}}
                  </span>
                </p>
                <img class="filter-x" @click="filtrateCancel" src="../../assets/documents/filterDelete.png">
              </div>
            </form>
            <template v-if="getDataFiled(tab.data).length <= 0">
              <div class="no-data-img">
                <img src="../../assets/meeting/no-data.png">
                <p>暂无相关数据~</p>
              </div>
            </template>
            <van-list 
              v-if="getDataFiled(tab.data).length > 0" 
              v-model="loading" 
              :finished="getDataFiled(tab.finished)" 
              finished-text="没有更多了" 
              @load="showList(tab.data, tab.page, tab.type, tab.finished, false, false)">
              <van-card v-for="(item,index) in getDataFiled(tab.data)" :key="`${index}list`" 
              @click="toDetail(item)">
                <div slot="thumb">
                  <template v-if="item.pic">
                    <van-image class="head-img" radius="4px" :src="`${$common.filePath}${item.pic}`"/>
                  </template>
                  <template v-else>
                    <img class="head-img" src="../../assets/notification/cell_head.png" />
                  </template>
                </div>
                <div slot="title">
                  <p class="title-class van-ellipsis">{{ item.name }} - {{ item.typename }}</p>
                </div>
                <div slot="desc">
                  <p class="desc-info-class van-ellipsis">标题：{{ item.title }}</p>
                  <!-- <p class="desc-info-class">流水号：{{ item.number }}</p> -->
                  <p class="desc-info-class">时间：{{ item.date }}</p>
                  <template v-if="item.type == '1'">
                    <p class="desc-box-class revocation-class">流程被撤销</p>
                  </template>
                </div>
              </van-card>
            </van-list>
          </van-pull-refresh>
        </div>
      </van-tab>
    </van-tabs>

    <!-- 筛选弹出框 -->
    <van-popup v-model="filtratePopup" round lock-scroll position="bottom" class="filtrete-pop"
    @click-overlay="filtrateClose">
      <van-nav-bar title="筛选" class="filtrate-title"/>
      <div class="filtrate-content">
        <van-checkbox-group v-model="filtrateResult" @change="onclick">
          <div v-for="(item,index) in filtrateTree" :key="index" v-if="item.son.length > 0">
            <p class="filtrate-content-title">{{item.typename}}</p>
            <van-row>
              <van-col span="11" v-for="(son, sindex) in item.son" :key="sindex+'son'" :offset="sindex%2==1?'2':''">
                <van-checkbox :ref="`filtrateItem${index}${sindex}`" class="filtrate-choose" :name="son.tplid">{{son.title}}</van-checkbox>
              </van-col>
            </van-row>
          </div>
        </van-checkbox-group>
      </div>
      <van-row type="flex" justify="space-between" class="filtrate-button">
        <van-col span="12">
          <div class="default-class" @click="filtrateCancel">重 置</div>
        </van-col>
        <van-col span="12">
          <div class="info-class" @click="filtrateChose">确 定</div>
        </van-col>
      </van-row>
    </van-popup>

  </div>
</template>
<script type="text/javascript">
  export default {
    data() {
      return {
        active: 0,

        tabs:[
          {
            name:'全部',
            type:'0',
            data:'allList',
            page:'allPage',
            finished:'allfinished'
          },
          {
            name:'已读',
            type:'1',
            data:'readyList',
            page:'readyPage',
            finished:'readyfinished'
          },
          {
            name:'未阅',
            type:'2',
            data:'unReadyList',
            page:'unReadyPage',
            finished:'unReadyfinished'
          }
        ],

        isLoading: false,
        loading: false,

        //全部
        allList:[],
        allPage:1,
        allfinished: false,
        //已读
        readyList:[],
        readyPage:1,
        readyfinished: false,
        // 未读
        unReadyList: [],
        unReadyPage: 1,
        unReadyfinished: false,

        searchValue:'',
        showCancel: false,

        filtrateTree: [],
        filtratePopup: false, //筛选弹出框控制器
        filtrateResult: [],
        showFiltrateData: [],
      };
    },
    activated() {
      this.$bridge.callHandler('navTitle', {title: '阅读公文'})
      this.$bridge.callHandler('navBack')
      this.$bridge.registerHandler('navBackClicked', (data,responseCallback) => {
        this.$router.push({name: "documentsHandle"})
        responseCallback("go(-1)")
      })
      this.showList('allList', 'allPage', 0, 'allfinished', true, true)
      this.showList('readyList', 'readyPage', 1, 'readyfinished', true, true)
      this.showList('unReadyList', 'unReadyPage', 2, 'unReadyfinished', true, true)

      this.getFiltrateData()
    },
    watch: {
      /**
       * 筛选框
       */
      'filtratePopup': {
        handler(newV, oldV){
          if (this.filtratePopup) {
            this.$bridge.callHandler('navKeepView')
            this.filtrateTree.forEach((tree,index) => {
              tree.son.forEach((son,sonindex) => {
                this.showFiltrateData.forEach((filtrate, findex) => {
                  if (son.tplid == filtrate.tplid) {
                    this.$refs['filtrateItem' + index +  sonindex][0].$el.classList.add("filtrate-choose_active")
                  }
                })
              })
            })
          } else {
            this.$bridge.callHandler('cancelNavKeepView')
          }
        }
      }
    },
    methods: {
      getDataFiled(dataFiled) {
        return this[dataFiled]
      },
      /**
       * 显示列表
       * @return {[type]} [description]
       */
      showList(target, page, type, finished, init, showToast) {
        this.loading = true
        let tplids = []
        tplids = this.showFiltrateData.map(item => {
          return item.tplid
        })
          if(init){
            this[page] = 1
            this[finished] = false
          }
          let config = {
            method:"post",
            url:`${this.$common.basePath}documentlist.php`,
            data: {
              do: 'document_reading',
              user_id: this.$store.state.userId,
              type: type,
              page: this[page]++,
              title: this.searchValue,
              tplid: tplids
            }
          }
          if(showToast) {
            this.$toast({
              duration: 0,
              forbidClick: true,
              className: 'loading-toast',
              icon: require('../../assets/loading.gif'),
            })
          }
          if(!this.finished || init){
            this.$axios(config).then(res => {
              this.loading = false
              this[target] = init?res.data.document : this[target].concat(res.data.document)
              this.isLoading = false;
              // 加载状态结束
              if(this[target].length >= res.data.count){
                this[finished] = true;
              }
              this.$toast.clear()
            }).catch(err => {
              this.$toast.clear()
              console.log(err)
            })
          }
      },
      /**
       * 搜索栏
       * @param  {[type]} type [description]
       * @return {[type]}      [description]
       */
      onSearch (value) {
        if (value) {
          this.showCancel = true
        }
        if (this.active == '0') {
          this.showList('allList', 'allPage', 0, 'allfinished', true, true)
        } else if (this.active == '1') {
          this.showList('readyList', 'readyPage', 1, 'readyfinished', true, true)
        } else if (this.active == '2') {
          this.showList('unReadyList', 'unReadyPage', 2, 'unReadyfinished', true, true)
        }
      },
      /**
       * 取消搜索
       * @return {[type]} [description]
       */
      onCancel () {
        this.showCancel = false
        this.showList('allList', 'allPage', 0, 'allfinished', true, true)
        this.showList('readyList', 'readyPage', 1, 'readyfinished', true, true)
        this.showList('unReadyList', 'unReadyPage', 2, 'unReadyfinished', true, true)
      },
      /**
       * 详情
       * @param  {[type]} id [description]
       * @return {[type]}    [description]
       */
      toDetail(item) {
        this.$router.push({name:'readyDetail', query:{id: item.appid, type: item.tpltype, tplid: item.tplid, rid: item.rid}})
      },
      
      /*
        * 获取筛选数据
       */
      getFiltrateData() {
        let config = {
          method: "post",
          url: `${this.$common.basePath}document.php`,
          data: {
            do: "applistall",
            user_id: this.$store.state.userId,
          }
        }
        this.$axios(config).then(res => {
          this.filtrateTree = res.data
        }).catch(err => {
          this.$toast(err.msg)
        })
      },
      /**
       * 选择事件
       * @return {[type]} [description]
       */
      onclick(e) {
        let self = this
        // 给元素动态添加class
        self.filtrateTree.forEach((tree,index) => {
          tree.son.forEach((son,sonindex) => {
            if (self.$refs['filtrateItem' + index + sonindex][0].checked) {
              // console.log(1)
              self.$refs['filtrateItem' + index +  sonindex][0].$el.classList.add("filtrate-choose_active")
            } else {
              // console.log(2)
              self.$refs['filtrateItem' + index +  sonindex][0].$el.classList.remove("filtrate-choose_active")
            }
          })
        })
      },
      /**
       * 点击蒙层关闭筛选框
       * @return {[type]} [description]
       */
      filtrateClose() {
        let self = this
        // 给元素动态重置class
        self.filtrateTree.forEach((tree,index) => {
          tree.son.forEach((son,sonindex) => {
            if (self.$refs['filtrateItem' + index + sonindex][0].checked) {
              self.$refs['filtrateItem' + index +  sonindex][0].$el.classList.remove("filtrate-choose_active")
            }
            self.showFiltrateData.forEach((filtrate, findex) => {
              if (son.tplid == filtrate.tplid) {
                self.$refs['filtrateItem' + index +  sonindex][0].$el.classList.add("filtrate-choose_active")
              }
            })
          })
        })
        // 同时将v-model删掉
        self.filtrateResult = self.showFiltrateData.map(item => {
          return item.tplid
        })
      },
      /** 
       * 重置筛选--还原所有tab
       */
      filtrateCancel() {
        let self = this
        // 给元素动态添加class
        self.filtrateTree.forEach((tree,index) => {
          tree.son.forEach((son,sonindex) => {
            if (self.$refs['filtrateItem' + index + sonindex][0]) {
              // console.log(1)
              self.$refs['filtrateItem' + index +  sonindex][0].$el.classList.remove("filtrate-choose_active")
            }
          })
        })
        this.filtrateResult = []
        this.showFiltrateData = []
        // this.filtratePopup = false
        this.showList('allList', 'allPage', 0, 'allfinished', true, true)
        this.showList('readyList', 'readyPage', 1, 'readyfinished', true, true)
        this.showList('unReadyList', 'unReadyPage', 2, 'unReadyfinished', true, true)
      },

      /**
       * 筛选
       * @return {[type]} [description]
       */
      filtrateChose() {
        this.filtratePopup = false
        this.showList('allList', 'allPage', 0, 'allfinished', true, true)
        this.showList('readyList', 'readyPage', 1, 'readyfinished', true, true)
        this.showList('unReadyList', 'unReadyPage', 2, 'unReadyfinished', true, true)
        // 筛选条件显示---数据处理
        if (this.filtrateResult.length > 0) {
          // 先清空数据
          this.showFiltrateData = []
            this.filtrateResult.forEach(newItem => {
              this.filtrateTree.forEach(item => {
                item.son.forEach(child => {
                  if (newItem == child.tplid) {
                    this.showFiltrateData.push(child)
                  }
                })
              })
            })
          } else {
            this.showFiltrateData = []
          }
      },
    }
  }
</script>
<style type="text/css" lang="less" scoped>
  .tab-panel  {
    -webkit-overflow-scrolling: touch;
    // height: calc(100vh - 44px);
    // overflow-y: auto;
    // padding-top: 53px;
    .van-list {
      min-height: calc(100vh - 44px);
    }
  }
  // van-card 开始
  p{
    margin: 0;
  }
  .van-card {
    background-color: #fff;
    padding: 15px 15px 0 15px;
    margin-top: 0;
  }
  .van-card__thumb {
    width: auto;
    height: auto;
    margin-right: 15px;
  }
  .van-card__content{
    min-height: auto;
    padding-bottom: 10px;
    border-bottom: 1px solid #F5F5F5;
  }
  .head-img {
    width: 45px;
    height: 45px;
    border-radius: 4px;
  }
  .title-class {
    font-size: 17px;
    color: #333333;
    font-weight: bold;
  }
  .desc-info-class {
    font-size: 14px;
    color: #999999;
    margin-top: 5px;
    margin-bottom: 5px;
  }
  // van-card 结束
  .no-data-img{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 50% 0 ;
    background-color: #fff;
    // height: calc(100vh - 44px);

    img{
      width: 180px;
      height: 106px;
      text-align: center;
    }

    p{
      font-size: 17px;
      color: #333333
    }
  }
  
</style>
<style type="text/css" lang="less">
  #readyList {
    height: 100vh;
    -webkit-overflow-scrolling: touch;

    .search-area {
      .van-cell {
        line-height: 25px;
      }
    }

    .van-tab span {
      font-size: 14px;
    }
    .van-tabs__wrap {
      padding: 0 50px;
      background-color: #fff;
    }
    .van-tabs__line {
      width: 64px!important;
    }
    .van-hairline--top-bottom::after {
      border: none;
    }
  }
</style>